<template>
    <!-- 上面部分容器 -->
    <div class="top-container">
        <!-- 标签和输入框 -->
        <div class="edit-title">
            <div class="text-title">文章标题</div>
            <el-input v-model="input_title" class="input-title" placeholder="输入标题..."></el-input>
        </div>
        <!-- 封面上传 -->   
        <!-- <div class="edit-title">
            <div class="text-title">文章封面</div>
            <el-upload ref="upload" class="upload-demo"
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :limit="1"
                :on-exceed="handleExceed" :auto-upload="false">
                <template #trigger>
                    <el-button type="primary" style="background-color: #545c64; margin-right: 10px;">选择文件...</el-button>
                </template>
                <template #tip>
                    <div class="el-upload__tip text-red">
                        只能上传一张封面，新封面会覆盖旧封面
                    </div>
                </template>
            </el-upload>
        </div> -->
    </div>
    <el-divider style="margin: 0px;width: 96%;margin-top: 15px;"/>
    <div style="height:10px;width: 100%;margin-top: 15px"></div>
    <div class="bottom-container">
        <div class="text-title">文章内容</div>
        <el-input v-model="textarea" type="textarea" :rows="25" class="input-context" placeholder="输入文章内容..."></el-input>
        <div style="width: 10%;">
        <el-button style="margin-left: 15px;" type="success" @click="submitUpload">提交</el-button>
        <el-button style="margin-left: 15px;margin-top: 10px;background-color: #545c64;color: #fff;" @click="saveAsDraft">保存为草稿</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import {
    addBlog,
    updateBlog,
 } from '@/api';
import {
        ref
    } from 'vue'
    import {
    genFileId,
        ElMessage
    } from 'element-plus'
    import type {
        UploadInstance,
        UploadProps,
        UploadRawFile
    } from 'element-plus'

    const input_title = ref('')
    const textarea = ref('')
// const upload = ref<UploadInstance>()
const userId = localStorage.getItem('userId');

    // const handleExceed: UploadProps['onExceed'] = (files) => {
    //     upload.value!.clearFiles()
    //     const file = files[0] as UploadRawFile
    //     file.uid = genFileId()
    //     upload.value!.handleStart(file)
    // }


    function getUrlParam(key: string) {

        // 获取地址栏上"?"问号及后面的参数
        let search = window.location.search.substring(1);
        console.log('search：', search);

        // 将url参数转为url对象
        let urlsp = new URLSearchParams(search);
        console.log('URLSearchParams', urlsp);

        // 根所传入的key返回对应的参数值
        return urlsp.get(key);
    }
const submitUpload = () => {
        let data = {
            title: input_title.value,
            content: textarea.value,
            bloggerId: userId,
            status:1,
    }
    addBlog(data).then(
        res => {
                if (res.code === 200) {
                    ElMessage({
                        message: '创建博文成功,3秒后跳转',
                        type: 'success',
                    })
                    setTimeout(() => {
                        window.location.href = "http://localhost:8080/myblog";
                    }, 3000)
                } else {
                    ElMessage({
                        message: '发布失败，网络异常',
                        type: 'error',
                    })
                }
            }
        )
}

    const saveAsDraft = () => {
    let data = {
            title: input_title.value,
            content: textarea.value,
            bloggerId: localStorage.getItem('userId'),
            id: getUrlParam('id'),
            status: 0,
        }
        console.log(data);

        addBlog(data).then(
            res => {
                if (res.code === 200) {
                    ElMessage({
                        message: '保存草稿成功,3秒后跳转',
                        type: 'success',
                    })
                    setTimeout(() => {
                        window.location.href = "http://localhost:8080/myblog";
                    }, 3000)
                } else {
                    ElMessage({
                        message: '保存失败，网络异常',
                        type: 'error',
                    })
                }
            }
        )
    }
</script>

<style scoped>
    .top-container {
        height: 120px;
        width: 80%;
        display: flex;
        align-items: center;

        /* justify-content: center; */
    }

    .edit-title {
        width: 100%;
        height: 30px;
        display: flex;
        gap: 10px;
    }

    .text-title {
        height: 30px;
        width: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 100px;
    }

    .input-title {
        width: 350px;
        height: 30px;
    }

    .bottom-container {
        width: 90%;
        height: 60%;
        display: flex;
    }

    .input-context {
        width: 1000px;
        margin-left: 10px;
    }
</style>